<template>
    <div ref="myChart" style="width:100%;height:100%" id="myChart"></div>
</template>
<script>
    export default {
        name: 'pie',
        props: {
            data: {
                type: Array,
                default() {
                    return {};
                },
            },
            title: {
                type: String,
                default: '',
            },
        },
        data: () => ({
            fhourTime: null,
        }),
        mounted() {
            this.drawChart();
        },
        methods: {
            drawChart() {
                const {myChart} = this.$refs;
                if (myChart) {
                    const thisChart = this.$echarts.init(myChart);
                    const option = {
                        title: {
                            text: this.title,
                            left: 6,
                            textStyle: {
                                color: '#069DFD',
                                fontSize: 12,
                                fontWeight: 400,
                            },
                        },
                        series: [{
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            data: this.data,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '14',
                                    color: '#4EB2F2',
                                    formatter: "{b}\n{c}\n{d}%",
                                }
                            },
                            itemStyle: {
                                color: function (params) {
                                    //自定义颜色
                                    let colorList = [
                                        '#F3ED5B', '#791DF3', '#04C8FB', '#1F5AF2'
                                    ];
                                    return colorList[params.dataIndex]
                                }
                            },
                            labelLine: {
                                show: false
                            },
                        }],
                    };
                    thisChart.setOption(option);
                    this.carouselTips(thisChart, this.data);// 轮播提示框
                    thisChart.on('mouseover', function (e) {
                        // debugger;
                        clearInterval(this.fhourTime);
                        this.fhourTime = null;
                        // thisChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: index});
                    });

                    // //当鼠标离开时，把当前项置为选中
                    // thisChart.on('mouseout', function (e) {
                    //     index = e.dataIndex;
                    //     thisChart.dispatchAction({type: 'highlight', seriesIndex: 0, dataIndex: e.dataIndex});
                    // });
                    window.addEventListener('resize', () => {
                        thisChart.resize();
                    })
                }
            },
            carouselTips(thisChart, dataList) {
                let hourIndex = 0;
                this.showTipsBox(thisChart, hourIndex);
                hourIndex++;
                this.fhourTime = setInterval(() => {
                    this.showTipsBox(thisChart, hourIndex);
                    hourIndex++;
                    if (hourIndex >= dataList.length) {
                        hourIndex = 0;
                    }
                }, 1000);
            },
            showTipsBox(thisChart, hourIndex) {
                thisChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                });
                thisChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: hourIndex,
                });
                thisChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: hourIndex,
                });
            },
            unEmphasis() {
                var dataLen = option.series[0].data.length;
                // 取消之前高亮的图形
                thisChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: 0
                })
            },
        },
    };
</script>
<style lang="less" scoped>
</style>
